<template>
  <div class="main">
    <div class="content">
      <div class="information">
        <el-form ref="form">
          <el-form-item label="用户id：">
            <el-input v-model="id" disabled></el-input>
          </el-form-item>
          <el-form-item label="用户名：">
            <el-input v-model="information.username" disabled></el-input>
          </el-form-item>
          <el-form-item label="昵称：">
            <el-input v-model="information.nickname"></el-input>
          </el-form-item>
          <el-form-item label="性别：">
            <el-input v-model="sexStr"></el-input>
          </el-form-item>
          <el-form-item label="余额：">
            <el-input v-model="information.balance" disabled></el-input>
          </el-form-item>
          <el-form-item label="地点：" v-show="!isChange">
            <el-input v-model="placeName" disabled></el-input>
          </el-form-item>
          <el-form-item label="地点：" v-show="isChange">
            <el-select v-model="place" @change="getPlaceId">
              <el-option v-for="place in placeList" :key="place.id"
                         :label="place.name" :value="place.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="button-wrap">
          <div class="button">
            <el-button type="primary" v-show="!isChange"
                       @click="isChange = true">修改信息
            </el-button>
            <el-button type="primary" v-show="isChange"
                       @click="isChange = false">查看信息
            </el-button>
            <el-button type="success" v-show="isChange"
                       @click="updateUser">提交修改</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {allPlaces} from "@/http/api/place";
import {getInformation, setInformation} from "@/http/api/user";
import cookie from "js-cookie";

export default {
  name: "Information",
  data() {
    return {

      id: '',

      // 个人信息
      information: {
        username: '',
        nickname: '',
        sex: '',
        balance: '',
        place_id: '',
      },

      sexStr: '',

      placeName: '',

      // 地点列表
      placeList: [],
      place: '1',

      // 是否在修改状态
      isChange: false,
    }
  },
  methods: {

    // 获取地点信息
    async getPlaceList() {
      let result = await allPlaces()
      if (result.code === 0) {
        this.placeList = result.data
      }
    },

    // 获取个人信息
    async getUser() {
      let result = await getInformation({
        userId: cookie.get('userId')
      })
      if (result.code === 0) {
        this.information = result.data
        if (this.information.sex === '0') {
          this.sexStr = '女'
        } else {
          this.sexStr = '男'
        }
      }
    },

    // 获取地点id
    getPlaceId() {
      if (!this.placeList) {
        return
      }
      for (let i = 0; i < this.placeList.length; i++) {
        if (this.placeList[i].id === this.place) {
          this.information.place_id = this.placeList[i].id
          this.placeName = this.placeList[i].name
        }
      }
    },

    // 获取地点名称
    getPlaceName() {
      if (!this.placeList) {
        return
      }
      for (let i = 0; i < this.placeList.length; i++) {
        if (this.placeList[i].id === this.information.place_id) {
          this.placeName = this.placeList[i].name
        }
      }
    },

    // 修改个人信息
    async updateUser() {
      if (this.sexStr === '男') {
        this.information.sex = 1
      } else {
        this.information.sex = 0
      }
      let result = await setInformation({
        userId: cookie.get('userId'),
        nickname: this.information.nickname,
        sex: this.information.sex,
        placeId: this.information.place_id,
      })
      if (result.code === 0) {
        this.$message.success('修改成功')
      }
    },
  },

  async mounted() {
    this.id = cookie.get('userId')
    await this.getPlaceList()
    await this.getUser()
    this.getPlaceName()
  }
}
</script>